<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';
import type {
  InspectionDataModel,
  InspectionRecordModel,
} from '#/api/equipment/models';

import { useVbenDrawer } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getInspectionDataListApi } from '#/api/equipment/inspectionData';

import { useDrawerColumns } from '../data';

const gridOptions: VxeGridProps<InspectionDataModel> = {
  columns: useDrawerColumns(),
  border: true,
  stripe: true,
  pagerConfig: {
    enabled: false,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

const [Drawer, drawerApi] = useVbenDrawer({
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const { id } = drawerApi.getData<InspectionRecordModel>();
      const data = await getInspectionDataListApi(id);
      gridApi.grid.loadData(data);
    }
  },
  title: '设备点检数据',
  showCancelButton: false,
  showConfirmButton: false,
});
</script>

<template>
  <Drawer>
    <div class="h-full">
      <Grid />
    </div>
  </Drawer>
</template>
